<template>
	<view class="container">
		<view class="tab-container flex justify-center">
			<wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" selectClass="text-orange" tabStyle="color: #aaaaaa;" @change="tabChange"></wuc-tab>
		</view>
		<view class="list-container margin-top padding-left padding-right">
			<view :url="`/pages/group_course_order/show?id=${item.id}`" v-for="(item, index) in groupCourseOrders" :key="index" class="primary-bg i-list-item radius margin-top flex align-center">
				<view class="image-wrapper radius margin-left-xs">
					<image @tap="previewImage" :data-src="item.group_course_cover_url + '?v=' + Math.random()" class="i-image" :src="item.group_course_cover_url + '?v=' + Math.random()" mode="aspectFit"></image>
				</view>
				<view @tap="showGroupCourseOrder(item.id)" class="info-wrapper padding-right-sm padding-bottom-xs">
					<view class="main-info-wrapper">
						<view class="text-white margin-top-xs">
							<text class="title text-xl">{{item.group_course_title}}</text>
						</view>
					</view>
					<view class="avatar-container flex align-center margin-top-xs">
						<view class="avatar-wrapper">
							<image :data-src="item.coach_cover_url + '?v=' + Math.random()" class="i-avatar" :src="item.coach_cover_url + '?v=' + Math.random()" mode="aspectFit"></image>
						</view>
						<view class="text-gray text-sm margin-left-xs">{{item.coach_name}}</view>
					</view>
					<view class="time text-orange margin-top-xs text-sm">{{item.full_course_time}}</view>
					<view class="address text-gray margin-top-xs text-sm">{{item.shop_address}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util.js';
import groupCourseOrder from '@/api/group_course_order.js';
import WucTab from '@/components/wuc-tab/wuc-tab.vue';

export default {
	data() {
		return {
			TabCur: 0,
			tabList: [{ name: '待核销' }, { name: '已核销' }, { name: '已取消' }],
			groupCourseOrders: []
		}
	},
	components: { WucTab },
	onLoad () {
		this.getGroupCourseOrders(this.TabCur + 1);
	},
	onPullDownRefresh() {
		this.getGroupCourseOrders();
		uni.stopPullDownRefresh();
	},
	methods: {
		async getGroupCourseOrders(status) {
			const res = await groupCourseOrder.list({status: status});
			this.groupCourseOrders = res.data;
		},
		previewImage(e) {
			const current = e.target.dataset.src;
			uni.previewImage({
				urls: [current],
			});
		},
		showGroupCourseOrder(id) {
			const url = `/pages/group_course_order/show?id=${id}`;
			util.toPage(url);
		},
		tabChange(e) {
			this.getGroupCourseOrders(e+1);
			console.log(e)
		}
	}
}
</script>

<style scoped lang="less">
.list-container {
	.i-list-item {
		height: 220upx;
		.image-wrapper {
			width: 200upx;
			height: 200upx;
			.i-image {
				border-radius: 10upx;
				height: 100%;
			}
		}
		.info-wrapper {
			margin-left: 15upx;
			width: 100%;
			height: 100%;
			.avatar-container {
				.avatar-wrapper {
					width: 40upx;
					height: 40upx;
					border-radius: 50%;
					.i-avatar {
						border-radius: 50%;
						height: 100%;
					}
				}
			}
			.price-info {
				width: 100%;
				.left-wrapper {
					
				}
				.price {
					color: #f6ca44;
				}
			}
		}
		.btn-area {
			margin-left: 60upx;
			.btn-buy {
				width: 120upx;
				height: 44upx;
				line-height: 44upx;
				border-radius: 4upx;
				background: #485575;
				border: none;
			}
		}
	}
}
</style>
